<script setup lang="ts">
  import { h, ref, onMounted } from 'vue'
  import { AccessTimeOutlined } from '@vicons/material'
  import { NIcon, NDatePicker, NDataTable, NPagination, useMessage, NSelect } from 'naive-ui'
  import { getLogList, deleteLog } from '@/api/log'
  import dayjs from 'dayjs'
  import DeleteModal from '@/components/common/DeleteModal/index.vue'

  const columns = [
    {
      title: '记录时间',
      key: 'operationTime',
    },
    {
      title: '操作账号',
      key: 'operatorAccount',
    },
    {
      title: '操作对象',
      key: 'fileName',
    },
    {
      title: '业务类型',
      key: 'businessType',
      render: (row: { businessType: number }) => {
        let text

        if (+row.businessType === 0) {
          text = '智能生成方案'
        } else if (+row.businessType === 1) {
          text = '方案智能审核'
        } else {
          text = '人工审核方案'
        }
        return h(
          'div',
          {
            class: 'flex items-center w-fit gap-1 rounded px-2 h-[20px] leading-[20px] text-[12px]',
          },
          [
            h(NIcon, {
              size: 16,
            }),
            h('div', { style: {} }, text),
          ]
        )
      },
    },
    // {
    //   title: '内容',
    //   key: 'content',
    // },
    {
      title: '内容',
      key: 'content',
      width: 500,
      ellipsis: {
        tooltip: true,
      },
    },
    {
      title: 'TraceID',
      key: 'traceId',
    },

    {
      title: '操作',
      width: 100,
      key: 'action',
      render: (row: any) => {
        return h(
          'span',
          {
            class: 'text-[#0B5CFF] cursor-pointer',
            onClick: () => handleDelete(row),
          },
          '删除'
        )
      },
    },
  ]

  const message = useMessage()

  const data = ref([])

  // const getList = async () => {
  //   const startTime = date.value ? dayjs(date.value[0]).format('YYYY-MM-DD HH:mm:ss') : undefined
  //   const endTime = date.value ? dayjs(date.value[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')  : undefined

  //   const res = await getLogList({
  //     pageNum: pageNum.value,
  //     pageSize: pageSize.value,
  //     // agentId:1,
  //     startTime,
  //     endTime,
  //      businessType: businessType.value

  //   })

  //   data.value = res.list
  //   itemCount.value = res.total

  // }

  const getList = async () => {
    const startTime = date.value ? dayjs(date.value[0]).format('YYYY-MM-DD 00:00:00') : undefined
    const endTime = date.value ? dayjs(date.value[1]).format('YYYY-MM-DD 23:59:59') : undefined

    const params: any = {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      startTime,
      endTime,
    }

    // 只有当businessType不是3(全部)时才添加该参数
    if (businessType.value !== 3) {
      params.businessType = businessType.value
    }

    const res = await getLogList(params)

    data.value = res.list
    itemCount.value = res.total
  }

  const date = ref(null)
  const pageNum = ref(1)
  const pageSize = ref(10)
  const itemCount = ref(0)
  const businessType = ref(3)
  const businessTypeOptions = ref([
    { label: '全部', value: 3 },
    { label: '智能生成方案', value: 0 },
    { label: '方案智能审核', value: 1 },
    { label: '人工审核方案', value: 2 },
  ])

  const handleUpdatePageSize = async (_pageSize: number) => {
    pageSize.value = _pageSize
    pageNum.value = 1
    await getList()
  }

  const handleUpdatePage = async (_page: number) => {
    pageNum.value = _page
    await getList()
  }

  const handleChange = async () => {
    pageNum.value = 1
    pageSize.value = 10
    await getList()
  }
  const deleteModalRef = ref()
  const deleteIds = ref()
  const handleDelete = (row: { id: string; traceId: string }) => {
    deleteIds.value = row.id
    deleteModalRef.value?.showModal(`确定要删除日志“${row.traceId}”吗？`)
  }

  const handleDeleteRow = async () => {
    await deleteLog({ id: deleteIds.value })
    message.success('删除成功')
    await getList()
  }

  onMounted(async () => {
    await getList()
  })
</script>

<template>
  <div class="content rounded h-[calc(100%-40px)] bg-white">
    <!-- 条件筛选 -->
    <div class="h-8 leading-8 flex items-center gap-4">
      <div class="flex items-center">
        <div class="text-[#4A5055]">记录时间：</div>
        <div class="flex items-center">
          <n-date-picker
            v-model:value="date"
            type="daterange"
            @update:value="handleChange"
            size="small"
            class="w-[400px]"
            clearable
          >
            <template #date-icon>
              <n-icon :size="16">
                <AccessTimeOutlined />
              </n-icon>
            </template>
          </n-date-picker>
        </div>
        <div class="text-[#4A5055]" style="margin-left: 10px">业务类型：</div>
        <div class="flex items-center">
          <n-select
            v-model:value="businessType"
            placeholder="请选择业务类型"
            :options="businessTypeOptions"
            class="w-[200px]"
            clearable
            @update:value="handleChange"
          />
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="flex-1 mt-6 flex flex-col">
      <n-data-table
        class="max-h-[calc(100%-56px)] overflow-y-auto"
        :columns="columns"
        :data="data"
        :pagination="false"
        :bordered="false"
      />
      <div class="h-8 mt-6 flex justify-end items-center">
        <n-pagination
          show-quick-jumper
          v-model:page="pageNum"
          :page-size="pageSize"
          :item-count="itemCount"
          :page-sizes="[10, 20, 50]"
          show-size-picker
          :on-update-page-size="handleUpdatePageSize"
          :on-update-page="handleUpdatePage"
        >
          <template #prefix="{ itemCount }">
            <span class="pingfang text-[#666D7A]">共 {{ itemCount }} 条</span>
          </template>
          <template #suffix>
            <span class="pingfang text-[#666D7A]">页</span>
          </template>
        </n-pagination>
      </div>
    </div>
  </div>
  <DeleteModal @close="deleteIds = []" ref="deleteModalRef" @submit="handleDeleteRow" />
</template>

<style lang="less" scoped>
  .content {
    margin: 20px auto;
    padding: 20px;
  }

  /* 自定义表格单元格样式 */
  :deep(.n-data-table-td) {
    .n-ellipsis {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
  }
</style>
